<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="css/wsDangan.css">
    <!-- 引入组件库 -->
    <script src="${request.contextPath}/statics/vue/vue.js"></script>
    <script src="${request.contextPath}/statics/vue/index.js"></script>
    <script src="${request.contextPath}/statics/vue/axios.js"></script>
    <link rel="stylesheet" href="${request.contextPath}/statics/vue/index.css">
    <script src="${request.contextPath}/statics/js/modules/dangan/daws.js?_${.now?long}"></script>
    <script src="${request.contextPath}/statics/js/config.js"></script>
    <script src="${request.contextPath}/statics/js/url-search-params.js"></script>

    <title>文书档案</title>
</head>
<body style="margin: 0px;">
<div id="app" v-cloak>
    <el-row style="height: 50px;background-image:  url(images/top_1.gif);">
        <img id="logo" src="images/logo.png" style="width: 250px;margin-left:20px;"/>
    </el-row>
    <el-row style="height:92px;background-color:#f7f8fa;">
        <div class="header-btn">
            <img src="images/index.jpg" width="42" height="42"/> <br>
            <a href="javascript://">首页</a>
        </div>
        <div class="header-btn">
            <img src="images/1.png" width="42" height="42"/> <br>
            <a href="javascript://">综合类</a>
        </div>
        <div class="header-btn">
            <img src="images/2.png" width="42" height="42"/> <br>
            <a href="javascript://" id="B">计划财务类<br>(B)</a>
        </div>
        <div class="header-btn">
            <img src="images/3.png" width="42" height="42"/> <br>
            <a href="javascript://" id="C">地籍管理类<br>(C)</a>
        </div>
        <div class="header-btn">
            <img src="images/4.gif" width="52" height="42"/> <br>
            <a href="javascript://" id="D">土地利用规划类<br>(D)</a>
        </div>
        <div class="header-btn">
            <img src="images/5.png" width="52" height="42"/> <br>
            <a href="javascript://" id="E">建设用地类<br>(E)</a>
        </div>
        <div class="header-btn">
            <img src="images/6.png" width="48" height="43"/> <br>
            <a href="javascript://" id="F">国土资源监察类<br>(F)</a>
        </div>
        <div class="header-btn">
            <img src="images/7.gif" width="52" height="42"/> <br>
            <a href="javascript://" id="G">宣教科技信息类<br>(G)</a>
        </div>
        <div class="header-btn">
            <img src="images/8.png" width="42" height="42"/> <br>
            <a href="javascript://" id="H">电子声像材料类<br>(H)</a>
        </div>
        <div class="header-btn">
            <img src="images/9.png" width="42" height="42"/> <br>
            <a href="javascript://" id="I">地质矿产管理类<br>(I)</a>
        </div>
        <div class="header-btn">
            <img src="images/10.png" width="42" height="42"/> <br>
            <a href="javascript://" id="sp">管理</a>
        </div>
    </el-row>
    <el-row style="margin-top: 10px;padding: 2px 10px;">
        <el-form ref="form" :inline="true" size="small" :model="form" label-width="40px">
            <el-form-item label="件号">
                <el-input v-model="form.jh"></el-input>
            </el-form-item>
            <el-form-item label="保管期限" label-width="60px;">
                <el-select v-model="form.bgqx" style="width: 100px;" placeholder="活动区域">
                    <el-option label="不限" value=""></el-option>
                    <el-option label="10年" value="10年"></el-option>
                    <el-option label="30年" value="30年"></el-option>
                    <el-option label="长期" value="长期"></el-option>
                    <el-option label="短期" value="短期"></el-option>
                    <el-option label="永久" value="永久"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="年度">
                <el-select v-model="form.nd" style="width: 100px;" placeholder="活动区域">
                    <el-option label="不限" value=""></el-option>
                    <el-option label="2016" value="10年"></el-option>
                    <el-option label="2015" value="2015"></el-option>
                    <el-option label="2014" value="2014"></el-option>
                    <el-option label="2013" value="2013"></el-option>
                    <el-option label="2012" value="2012"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="文号">
                <el-input v-model="form.wh"></el-input>
            </el-form-item>
            <el-form-item label="文件标题" label-width="60px;">
                <el-input v-model="form.bt" style="width: 250px;"></el-input>
            </el-form-item>
        </el-form>
        <el-row>
            <el-pagination
                    style="margin-bottom: 10px;"
                    background
                    layout="prev, pager, next,total"
                    :total="1000">
            </el-pagination>
            <el-table
                    :data="tableData"
                    stripe
                    border
                    size="mini"
                    style="width: 100%;height: 640px;box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)"
            >

                <el-table-column
                        prop="date"
                        label="序号"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="name"
                        label="文件标题"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="address"
                        label="保管期限">
                </el-table-column>
                <el-table-column
                        prop="address"
                        label="文号">
                </el-table-column>
                <el-table-column
                        prop="address"
                        label="年度">
                </el-table-column>
                <el-table-column
                        prop="address"
                        label="件号">
                </el-table-column>
                <el-table-column
                        label="操作">
                    <template slot-scope="scope">
                        <el-button @click="handleClick(scope.row)" type="primary" size="small">查看</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-row>
    </el-row>
</div>
</body>
<script type="text/javascript">
    var vm = new Vue({
        el: '#app',
        data: {
            form: {
                jh: "",//件号
                bgqx: "",//保管期限
                nd: "",//年度
                wh: "",//文号
                bt: "",//文件标题
            },
            tableData: [{
                date: '2016-05-02',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                date: '2016-05-04',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1517 弄'
            }, {
                date: '2016-05-01',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1519 弄'
            }, {
                date: '2016-05-03',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1516 弄'
            }]
        },
        method: {}
    })
</script>
</html>



